<script setup lang="ts">
	import { computed, onMounted } from 'vue'

	const props = withDefaults(defineProps<{ title ?: string, fixed ?: boolean }>(), {
		fixed: false
	})

	const styles = computed(() => {
		return {
			...(props.fixed ? { position: 'fixed' } : {}),
			marginTop: uni.getWindowInfo().statusBarHeight + "px"
		}
	})

	const handleBack = () => {
		uni.navigateBack()
	}
</script>

<template>
	<view class="title" :style="styles">
		<view class="back" @tap="handleBack">
			<um-icon name="arrowleft" color="#838383" :size="20" class="icon"></um-icon>
		</view>
		{{title}}
	</view>
</template>

<style lang="scss" scoped>
	.title {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		position: relative;
		z-index: 998;
		width: 100%;
	}

	.back {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 48rpx;
		height: 48rpx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		.icon {
			margin-top: 6rpx;
		}
	}
</style>